<template>
	<view>
		<view class="container" @click="deviceListItemClick">
			<view class="topBar">
				<view class="topBarleftIcon">
					<image class="topBarleftIcon" v-if="policeItem.handleStatic == 2" src="@/static/images/common/need-handle.png" />
				</view>
				<view class="rightcontent">
					<text class="normalLinetext">{{ levelDes }}</text>
					<view v-if="policeItem.level">
						<image class="rightcontenticon" src="@/static/images/common/height-police.png" v-if="policeItem.level == 1"></image>
						<image class="rightcontenticon" src="@/static/images/common/low-police.png" v-else></image>
					</view>
				</view>
			</view>
			<view class="content1">
				<view class="firstLine">
					<view class="firstLinetitle">{{ policeItem.deviceName }}</view>
					<view class="firstLinetime text-gray">{{ policeItem.ts | dateFomatterYYYYMMDD }}</view>
				</view>
				<view class="normalLine" style="margin-top: 10px">
					<image class="normalLineicon" src="@/static/images/common/police-building.png" />
					<view class="normalLinetext">
						{{ policeItem.buildingName }}  {{ policeItem.slaveName }} 发生{{ levelDes }}
						<text v-if="[0, 1, 2].includes(policeItem.level)">,浓度值:{{ policeItem.data }}{{ policeItem.propertyUnit }}</text>
					</view>
				</view>
				<view class="normalLine" style="margin-bottom: 10px">
					<image class="normalLineicon" src="@/static/images/common/police-build-address.png" />
					<view class="normalLinetext">{{ policeItem.address }}</view>
				</view>
			</view>
			<view class="flexrowflexend margin-right margin-bottom">
				<view class="bggray-black-btn margin-right-lg padding-tb-xs padding-lr-sm" @click.stop @click="deviceInfoClick">设备信息</view>
				<view class="bgwhite-blue-btn margin-right-lg padding-tb-xs padding-lr-sm" @click.stop="dealRecordClick" v-if="policeItem.handleStatic != 2">处理记录</view>
				<view class="bgblue-white-btn padding-tb-xs padding-lr-sm" @click.stop="dealPolice" v-if="policeItem.handleStatic == 2">开始处理</view>
			</view>
		</view>
	</view>
</template>

<script>
import dayjs from 'dayjs';
export default {
	name: 'device-list-item',
	created() {},
	props: {
		policeItem: Object
	},
	filters: {
		dateFomatterYYYYMMDD(date) {
			return date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : '';
		}
	},
	data() {
		return {
			//	@Schema(description = "解决状态 已处理:0，1,待处理:2")
			// private Integer handleStatic;
			dictMap: this.$store.state.dict.dictMap
		};
	},
	computed: {
		levelDes() {
			let level = this.policeItem.level;
			let label = '';
			const alarm_type = this.dictMap?.alarm_type || [];
			alarm_type.map((item) => {
				if (item.value == level) {
					label = item.label;
				}
			});
			return label;
		}
	},
	methods: {
		deviceListItemClick() {
			this.$emit('deviceListItemClick');
		},
		deviceInfoClick() {
			this.$emit('deviceInfoClick', this.data);
		},
		dealRecordClick() {
			this.$emit('dealRecordClick', this.data);
		},
		dealPolice() {
			this.$emit('dealPolice', this.data);
		}
	}
};
</script>

<style scoped>
.container {
	margin-top: 20rpx;
	width: 720rpx;
	background-color: rgba(255, 255, 255, 0.7);
	/*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);*/
	border-radius: 10rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.topBar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.topBarleftIcon {
	text-align: center;
	vertical-align: middle;
	height: 18px;
	width: 50px;
}

.rightcontent {
	margin: 5px;

	display: flex;
	align-items: center;
	flex-direction: row;
}

.rightcontenticon {
	width: 20px;
	height: 20px;
}

.firstLinetitle {
	font-size: 26rpx;
	font-weight: bold;
	color: #000;
}

.firstLinetime {
	margin-left: 10px;
	font-size: 14px;
}

.normalLine {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: 5px;
	padding-bottom: 5px;
	padding-top: 5px;
}

.normalLineicon {
	margin-left: 5px;
	margin-right: 5px;
	width: 18px;
	height: 18px;
}

.normalLinetext {
	font-size: 12px;
}

.firstLine {
	margin-left: 20rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
</style>
